<template name="orderItem">
	<view class="orderItem" :data-oid="item.orderNo" :data-rid="item.refundId" :data-id="item.order_id" @tap="toDetail" :data-status="item.status">
		<view class="orderKey">
			<text class="orderId">订单号:{{item.orderNo}}</text>
			<text class="orderStatus">{{statusArr[item.status]}}</text>
		</view>
		<view class="placeOrderBox">
			<view class="placeUserBox" @tap.stop="toHuihua" data-url="conversationDetail" :data-imid="item.imid">
				<text class="iconfont icon-liaotian"></text>
				<text class="placeName">{{item.nickname}}</text>
			</view>
			<text class="paymentText">{{txtArr[item.status]}}:</text>
			<text class="paymentCount">￥{{(item.payAll==1)?(item.price-item.prepay-item.discount).toFixed(2):item.prepay}}</text>
		</view>
		<view class="goodBox">
			<image :src="item.img?item.img:'../../static/good.png'" class="goodImg"></image>
			<view class="goodInfo">
				<text class="goodTitle">{{item.name}} </text>
				<text class="goodPrice">￥{{item.total}}</text>
			</view>
		</view>
		<view class="studentBox">
			<text class="studentTt">学员信息：</text>
			<text class="iconfont icon-renyuan"></text>
			<text class="studentName">{{item.member.name}}</text>
			<image src="../../static/tel.png"></image>
			<text class="studentTel">{{item.member.phone}}</text>
		</view>
		<view class="orderRemark refundReason" v-if="item.status==6||item.status==7">
			<text class="remarkTitle reasonText">{{refundStatus[item.refundStatus]}}</text>
			<text class="remarkCnt refundCount">退款金额：￥{{item.refundAmount?item.refundAmount:item.actualAmount}}</text>
		</view>
		<view class="orderRemark" v-if="item.status==5" :data-oid="item.order_id" @tap.stop="addLabel">
			<text class="remarkTitle">分班标签：</text>
			<text class="remarkCnt">{{item.label?item.label:'点击添加分班标签'}}</text>
			<text class="iconfont icon-right"></text>
		</view>
		<view class="orderRemark" :data-oid="item.order_id" @tap.stop="remarke">
			<text class="remarkTitle">卖家备注：</text>
			<text class="remarkCnt">{{item.memo?item.memo:'点击添加备注'}}</text>
			<text class="iconfont icon-right"></text>
		</view>
		<view class="orderOptBox">
			<button @tap.stop="reminder" v-if="item.status==1||item.status==2||item.status==3" :data-imid="item.imid" >催
				单</button>
			<button @tap.stop="toHuihua" v-if="item.status==4" :data-imid="item.imid" >提醒体验</button>
			<button @tap.stop="toHuihua" v-if="item.status==5" :data-imid="item.imid" >开课提醒</button>
			<button v-if="item.status==6">处理退款</button>
		</view>
	</view>
</template>

<script>
	import COMM from "@/common/common.js"
	import {
		mapState
	} from "vuex";
	export default {
		name: 'orderItem', //组件名称
		// 传递参数
		props: {
			item: {
				type: Object,
				default: null
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				selectShop: state => state.shop.selectShop,
			})

		},
		// 组件参数
		data() {
			return {
				data1: 'value1',
				statusArr: ['全部', '待付预约金', '待付尾款', '待付全款', '待体验', '待开课', '退款中', '已退款', '已关闭', '已完成'],
				refundStatus: ['', '买家发起申请', '买家撤销申请', '卖家同意退款', '卖家请求协商', '买家同意协商', '买家拒绝协商', '卖家申请平台介入','','','已退款', '已关闭', '退款失败'],
				txtArr: ['已支付', '待支付', '待支付', '待支付', '已支付', '已支付', '已支付', '已支付', '待支付', '已支付']
			}
		},
		// 组件方法
		methods: {
			// 备注订单
			remarke(e) {
				uni.$emit("remark", {
					orderId: e.currentTarget.dataset.oid
				})
			},
			addLabel(e) {
				uni.$emit("addLabel", {
					orderId: e.currentTarget.dataset.oid
				})
			},
			// 催单
			reminder(e) {
				let _this = this;
				let toImid = e.currentTarget.dataset.imid
				this.$store.dispatch("timSendZdMsg",{
					to:toImid,
					payload:{
						data: 'reminder',
						description: this.item.orderNo
					}
				}).then(res=>{
					this.toPage({
						url: 'conversationDt',
						cvid: 'C2C' + toImid,
						toImId: toImid
					})
				})
			},
			toDetail(e) {
				let _orderStatus = e.currentTarget.dataset.status
				if (_orderStatus != '6' && _orderStatus != '7') {
					let _orderId = e.currentTarget.dataset.oid;
					this.toPage({
						url: 'orderDetail',
						orderId: _orderId
					})
				} else {
					let _orderId = e.currentTarget.dataset.id;
					this.toPage({
						url: 'refundOrderDt',
						orderId: _orderId
					})
				}

			},
			// 跳转到会话页面
			toHuihua(e) {
				let toImid = e.currentTarget.dataset.imid
				this.toPage({
					url: 'conversationDt',
					cvid: 'C2C' + toImid,
					toImId: toImid
				})
			}
		}
	}
</script>

<style lang="less">
	.orderList {
		padding: 11upx 17upx;
		display: flex;
		flex-direction: column;
	}

	.orderItem {
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 8upx;
		display: flex;
		flex-direction: column;
		padding: 20upx 0;
		margin-bottom: 50upx;

		.orderKey {
			display: flex;
			padding: 0 20upx;
			justify-content: space-between;

			.orderId {
				font-size: 26rpx;
				color: #737373;
			}

			.orderStatus {
				font-size: 26rpx;
				color: #ffb423;
			}
		}

		.placeOrderBox {
			display: flex;
			border-bottom: 1px solid #efefef;
			padding: 0 20upx 20upx 20upx;
			justify-content: space-between;
			margin-top: 24upx;
			align-items: center;

			.placeUserBox {
				display: flex;

				.iconfont {
					color: #ffbb37;
					margin-right: 15upx;
				}

				.placeName {
					font-size: 26rpx;
					color: #202932;
					margin-top: -5upx;
				}
			}

			.paymentText {
				font-size: 26rpx;
				flex: 1;
				text-align: right;
				color: #202932;
			}

			.paymentCount {
				font-size: 34rpx;
				font-weight: bold;
				color: #202932;
			}
		}

		.goodBox {
			display: flex;
			border-bottom: 1px solid #efefef;
			padding: 15upx 20upx;

			image {
				width: 166upx;
				height: 166upx;
				flex-shrink: 0;
				border-radius: 10upx;
				margin-right: 30upx;
			}

			.goodInfo {
				display: flex;
				flex-direction: column;
				padding: 12upx 0;

				.goodTitle {
					font-size: 28rpx;
					color: #202932;
					margin-bottom: 8upx;
				}

				.goodPrice {
					font-size: 32rpx;
					font-weight: bold;
					color: #202932;
				}
			}

		}

		.studentBox {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #efefef;
			padding: 15upx 20upx;

			.studentTt {
				font-size: 28rpx;
				color: #202932;
			}

			.iconfont {
				font-size: 40upx;
				color: #babfc3;
				margin-right: 15upx;
			}

			.studentName {
				font-size: 28rpx;
				color: #202932;
				margin-right: 50upx;
			}

			image {
				width: 40upx;
				height: 40upx;
				margin-right: 15upx;
			}

			.studentTel {
				font-size: 28rpx;
				color: #202932;
			}
		}

		.orderRemark {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #efefef;
			padding: 24upx 20upx;

			.remarkTitle {
				font-size: 26rpx;
				color: #202932;
			}

			.remarkCnt {
				font-size: 26rpx;
				color: #939393;
				flex-grow: 1;
			}

			.iconfont {
				color: #939393;
				font-size: 24upx;
			}
		}

		.refundReason {
			justify-content: space-between;

			.reasonText {
				color: #FF0000;
			}

			.refundCount {
				color: #FF0000;
				text-align: right;
			}
		}

		.orderOptBox {
			display: flex;
			width: 100%;
			justify-content: flex-end;
			padding: 20upx 20upx 0 20upx;

			button {
				height: 62upx;
				border: solid 3rpx #ffb423;
				border-radius: 31upx;
				background-color: #FFFFFF;
				font-size: 32rpx;
				color: #ffa71d;
				line-height: 56upx;
				padding: 0 50upx;
				margin: 0;
			}

			button:after {
				border: none;
			}
		}
	}
</style>
